<template>
    <el-dialog title="新增部门" @close="close" :visible="showDialog">
     <!-- 弹窗编辑内容 -->
     <!-- 表单结构 -->
     <el-form ref="form" :rules="addRules" :model="addForm" label-width="120px; ">
      <el-form-item label="部门名称" prop="name">
            <el-input v-model="addForm.name" style="width: 80%;" size="mini" placeholder="2-10个字符"></el-input>
      </el-form-item>
       <el-form-item label="部门编码" prop="code">
            <el-input  v-model="addForm.code" style="width: 80%;" size="mini" placeholder="2-10个字符"></el-input>
      </el-form-item>
       <el-form-item label="部门负责人" prop="managerId">
            <el-select  v-model="addForm.managerId" style="width: 80%;" size="mini" placeholder="请选择负责人" change="valueChange">
            <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id"></el-option>
     </el-select>
      </el-form-item>
       <el-form-item label="部门介绍" prop="introduce">
            <el-input   v-model="addForm.introduce" type="textarea"  style="width: 80%;" placeholder="1-100个字符"></el-input>
      </el-form-item>
      <el-form-item>
            <el-row type="flex" justify="center">
                  <el-col :span="12">
                        <el-button type="primary" size="mini" >确定</el-button>
                        <el-button type="primary" size="mini" >取消</el-button>
                  </el-col>
            </el-row>
      </el-form-item>
     </el-form>
    </el-dialog>
</template>
<script>
import { getDepartment, getManagerAPI } from '@/api/department'
export default {
      data() {
            //  表单校验
            return {
                  // 负责人列表数据
                  managerList:[],
                  // 表单数据
                  addForm: {
                        code:'',//部门编码
                        managerId: '',//部门负责人id
                        name: '',//部门名称
                        pid: '',//父级部门id
                        introduce:'' //部门介绍
                  },
                  // 校验规则
                  addRules: {
                        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
                              { min: 2, max: 10, message: '部门编码要求2-10个字符', trigger: 'blur' },
                              {
                                    // 自定义校验
                                    trigger: 'blur',
                                    validator: async(rule, value, callback) => {
                                          const res = await getDepartment()
                                          if (res.some(item => item.code === value)) {
                                          callback(new Error('部门中已经有该编码了'))
                                          } else {
                                          callback()
                                     }
                              }
                        }],
                           name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
                              { min: 2, max: 10, message: '部门名称要求2-10个字符', trigger: 'blur' },
                              {
                                    // 自定义校验
                                    trigger: 'blur',
                                    validator: async(rule, value, callback) => {
                                          const res = await getDepartment()
                                          if (res.some(item => item.name === value)) {
                                          callback(new Error('部门中已经有该部门名称了了'))
                                          } else {
                                          callback()
                                     }
                              }
                        }],
                        managerId: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' },
                              { min: 2, max: 10, message: '部门负责人要求2-10个字符', trigger: 'blur' },
                        ],
                        
                     
                        
                        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
                               { min:2 ,max:10,message:'部门介绍要求2-10个字符',trigger: 'blur'  } ]   
                  }
            }
      },
      props: {
            showDialog: {
                  type: "boolean", 
                  default: false
      }
      },
      created() {
            this.getManagerList()
      },
      methods: {
            // 关闭弹窗
            close() {
                  // 子传父
            this.$emit("update:showDialog",false)
            },
            // 获取部门负责人列表
            async getManagerList() {
                  const res = await getManagerAPI()
                  this.managerList = res
                   console.log(this.managerList);
            },
            // 选中的值发生变化
            valueChange(value) {
                  console.log(value);
            }

          
      
     }
}
</script>